<template>
	<view>
		<view class="chatbox">
			<scroll-view scroll-y="true" id="scrollViewId" class="scroll-view">
				<view id="msglistview" class="chat-body">
					<view v-for="(item,index) in msgList" :key="index" :id="'msgList' + item.id">
						<view class="item self" v-if="item.userContent">
							<view class="content right">
								{{item.userContent}}
							</view>
							<view class="avatar">
								<image style="width: 100%;height: 100%;" src="@/static/sjimg/yonghu.png" mode="aspectFill">
								</image>
							</view>
						</view>
						<view class="item Ai" v-if="item.botContent">
							<view class="avatar">
								<image style="width: 100%;height: 100%;" src="@/static/sjimg/kefu.png" mode="aspectFill">
								</image>
							</view>
							<view class="content left">
								{{item.botContent}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view style="width: 100%;height: 62px;"></view>
			<view class="send-msg">
				<view class="sends">
					<input @input="getUserContent" class="input" v-model="userContent" type="text"></input>
					<button @click="handleSend" class="send-btn">发送</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad , onUnload } from '@dcloudio/uni-app';
	import { apiKefu , apiSend } from '@/api/upapi.js';

	const scrollTop = ref(0)
	const memberid = ref('')
	const userContent = ref('')
	const msgList = ref([
		{ botContent: "hello,我是客服!请问我有什么可以帮助您的吗？" },
		{ userContent: "" }
	]);
	let timerId = null;

	const back = () => { uni.navigateBack({ delta: 1 }) };
	const guigeData = async () => {
		msgList.value=[
			{ botContent: "hello,我是客服!请问我有什么可以帮助您的吗？" },
			{ userContent: "" }
		];
		try {
			let res = await apiKefu({
				type: 0,
				memberId: memberid.value
			});
			var newData = res.data.object;
			if (res.data.result === 0) {
				const oldData = JSON.stringify(msgList.value);
				newData.forEach(item => {
				  if (item.type === 2) {
				    if (item.content) {
				      const newItem = { botContent: item.content };
				      if (!oldData.includes(JSON.stringify(newItem))) {
				        msgList.value.push(newItem);
				      }
				    }
				  } else {
				    if (item.content) {
				      const newItem = { userContent: item.content };
				      if (!oldData.includes(JSON.stringify(newItem))) {
				        msgList.value.push(newItem);
				      }
				    }
				  }
				});
			}
		} catch (error) {
		  console.error('获取数据失败', error);
		} finally {
		  timerId = setTimeout(guigeData, 5000);
		}
	};
	const getUserContent = (e) => {
		userContent.value = e.detail.value
	};
	const handleSend = async () => {
		if(userContent.value.trim() == ''){ uni.showToast({ title: '不能发送空白消息', icon: "none" });return }
		try {
			let res = await apiSend({
				merchantId: 133,
				id: memberid.value,
				content: userContent.value
			});
			msgList.value.push({
				userContent: userContent.value
			})
			userContent.value = ''
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};

	onLoad((option) => {
		const value = uni.getStorageSync('xwmemberId');
		memberid.value = value;
		guigeData();
	});
	onUnload(() => {
		if (timerId) {
			console.log('定时器已清除');
			clearTimeout(timerId);
		}
	});
</script>

<style lang="less" scoped>
	.scroll-view {

		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			color: transparent;
		}

		background-color: #F6F6F6;

		.chat-body {
			display: flex;
			flex-direction: column;
			padding-top: 23rpx;

			.self {
				justify-content: flex-end;
			}

			.item {
				display: flex;
				padding: 23rpx 30rpx;

				.right {
					background-color: #FFFFFF;
				}

				.left {
					background-color: #FFFFFF;
				}

				// 聊天消息的三角形
				.right::after {
					position: absolute;
					display: inline-block;
					content: '';
					width: 0;
					height: 0;
					left: 100%;
					top: 10px;
					border: 12rpx solid transparent;
					border-left: 12rpx solid #fcf1e5;
				}

				.left::after {
					position: absolute;
					display: inline-block;
					content: '';
					width: 0;
					height: 0;
					top: 10px;
					right: 100%;
					border: 12rpx solid transparent;
					border-right: 12rpx solid #FFFFFF;
				}

				.content {
					position: relative;
					max-width: 486rpx;
					border-radius: 8rpx;
					word-wrap: break-word;
					padding: 24rpx 24rpx;
					margin: 0 24rpx;
					border-radius: 5px;
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
				}

				.avatar {
					display: flex;
					justify-content: center;
					width: 78rpx;
					height: 78rpx;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						align-self: center;
					}

				}
			}
		}
	}

	.send-msg {
		padding: 20rpx 0;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #EDEDED;
		border-radius: 20rpx 20rpx 0 0;
	}

	.sends {
		display: flex;
		margin: 0 30rpx 10rpx;
	}

	.input {
		background-color: #FFFFFF;
		height: 75rpx;
		flex: 1;
		border-radius: 10rpx;
		padding: 0 30rpx;
	}

	.send-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 25rpx;
		width: 128rpx;
		height: 75rpx;
		background: #ff4a82;
		border-radius: 80rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 28rpx;
	}
</style>